<template>
	<div class="dispaygrid" v-loading="loading">
		<ul class="columnLayout">
			<li v-for="(item, index) in aclist" :key="index" class="qzlist qzlistgrid minxgap">
				<div :class="[item.reply.length > 0 ? 'Green' : 'grey', item.reply.length > 0 ? 'QAbox' : 'QAboxno']">
					<div class="columnLayout"
						><span class="center">{{ item.reply.length }}</span
						><span class="center">回答</span>
					</div>
				</div>
				<div class="columnLayout space-around">
					<router-link :to="'/qaarticle/' + item.alias + '/' + item.id"
						><div class="turngreen qztitle">{{ item.title }}11111111111111111111111111111111111111111111111111111</div></router-link
					>
					<div class="articlebt minfont grey line">
						<div class="Horizontalspacing minaxgap">
							<div class="Horizontalspacing minixgap">
								<el-avatar class="pimgmins" :src="item.user.Avatar">
									<div class="image-slot iconfont icon-setting-role"></div>
								</el-avatar>
								<span v-if="item.user.nickname" class="center">{{ item.user.nickname }}</span>
								<span v-else class="center">{{ item.user.username }}</span>
							</div>
							<div class="center left">{{ item.pidname }}</div>
							<div class="Horizontalspacing minixgap left">
								<div class="iconfont icon-riqi_o"></div>
								<span class="center">{{ item.Creationtime }}</span>
							</div>
							<div class="Horizontalspacing minixgap">
								<div class="iconfont icon-icon"></div>
								<span class="center">{{ item.PageView }}</span>
							</div>
							<div class="left Horizontalspacing minixgap" v-if="item.Price > 0">
								<div class="iconfont icon-dashangcishu red"></div>
								<span class="center Horizontalspacing">
									<p>悬赏</p>
									<p class="red">{{ item.Price }}</p>
									<p>元</p>
									<p v-if="item.optimal">已解决</p>
								</span>
							</div>
						</div>
						<!-- 有最佳答案才显示 -->
						<router-link class="center qavwpc" :to="'/qaarticle/' + item.alias + '/' + item.id + '.html'" v-if="item.optimal">问题有人回答啦，进来学习一下吧~</router-link>
						<router-link class="center qavw" :to="'/qaarticle/' + item.alias + '/' + item.id + '.html'" v-if="item.optimal">问题有人回答啦</router-link>
						<router-link class="center Illanswer" :to="'/qaarticle/' + item.alias + '/' + item.id + '.html'" v-else>我来回答</router-link>
					</div>
				</div>
			</li>
		</ul>
		<el-pagination background class="centerend" :hide-on-single-page="value" :current-page="curPage" @current-change="page" :page-size="pagesize" layout="prev, pager, next" :total="total"> </el-pagination>
	</div>
</template>

<script>
	import { dataRequest as api } from '@/api/api'
	export default {
		name: 'name',
		props: ['userid'],
		components: {
			// 组件
		},
		data() {
			return {
				//返回值

				loading: true,
				value: true,
				curPage: 1,
				pagesize: 10, //每页显示数量
				total: 0,

				//返回值
				offset: 'DESC',
				tosort: 'time',
				aclist: '',
			}
		},
		methods: {
			// 函数
			// 函数
			async actr() {
				let array = await api(['getquestionpage', { userid: this.userid, perPage: this.pagesize, page: this.curPage, offset: this.offset, tosort: this.tosort }])
				this.loading = false
				if (array.code == 200) {
					this.aclist = array.data
					this.total = array.massage / 1
					for (const key in this.aclist) {
						this.aclist[key].Price = (Math.round(this.aclist[key].Price * 1000) / 1000).toString()
					}
				}
			},
			// fenye
			page(ele) {
				this.loading = true
				this.curPage = ele
				this.actr()
			},
		},
		mounted() {
			// 生命周期:
			if (this.userid) {
				this.actr()
			}
		},
		updated() {
			window.scrollTo({ behavior: 'instant', top: 0 })
		},
	}
</script>
<style scoped>
	.centerend {
		place-self: center end;
	}
	.pimgmins .image-slot {
		font-size: 8px;
	}
</style>
<style scoped>
	.qavwpc {
		display: block;
	}
	.qavw {
		display: none;
	}
	.pimgmins .image-slot {
		font-size: 8px;
	}

	.qztitle {
		white-space: nowrap; /* 防止换行 */
		overflow: hidden; /* 隐藏超出部分 */
		text-overflow: ellipsis; /* 添加省略号 */
		width: 747px;
	}
	.image-slot {
		height: 68px;
		width: 68px;
	}
</style>
<style scoped>
	@media screen and (max-width: 860px) {
		.qznav {
			width: 100vw;
		}
		.qztitle {
			width: 2.62rem;
		}
		.questionnav {
			height: 1.22rem;
		}
		.qavwpc {
			display: none;
		}
		.qavw {
			display: block;
		}
	}
</style>
